<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p>msg:{{msg}}</p>
    </div>
</body>
</html>
<script src="./js/vue.global.js"></script>
<script>

    //一、 vue2

    // new Vue({
    //     data:{
    //         msg:"hi"
    //     },        
    // }).$mount("#app");

    // 注册全局组件
    // Vue.component()//当注册好一个全局组件后，任何用new Vue()创建的对象，都可以使用该组件
    // 注册全局指令
    // Vue.directive();//当注册好一个全局指令后，任何用new Vue()创建的对象，都可以使用该组件

    let vm2 = new Vue();//可以使用全局注册的组件。

    //二、 vue3
    // 一个app就是一个全局的对象。那么，在一个app中全局注册的组件，指令等等，不会污染其它app
    let app = Vue.createApp({
        data(){
            return {
                msg:"hi"
            }
        }
    });

    app.mount("#app");

    // 注册全局组件
    app.component();//当注册好一个全局组件后，在app及其子组件里，就可以全局使用，但是，另外一个app并不会受影响
    // 注册全局指令
    app.directive();//当注册好一个全局指令后，在app及其子组件里，就可以全局使用


    let app2 = Vue.createApp({});
    // app2里不会拿到app中注册的全局组件和指令。
    



</script>